<template>
  <div class="box slide-right">
    <div class="icon"><i class="el-icon-info"/></div>
    <div class="tip">{{ tip }}</div>
    <div class="undo-btn" v-if="showButton" @click.stop="clickUndo">{{ $t('loc.Undo') }}</div>
    <i class="el-icon-close close-btn" @click.stop="clickClose"/>
  </div>
</template>

<script>
export default {
  name: 'UndoMessage',
  props: ['tip', 'showButton'],
  emits: ['close', 'undo'],
  methods: {
    clickUndo () {
      this.$emit('undo', null)
    },
    clickClose () {
      this.$emit('close', null)
    }
  }
}
</script>

<style scoped>
.box{
  position: fixed;
  left: 5rem;
  bottom: 5rem;
  background-color: #202124;
  display: flex;
  align-items: center;
  border-radius: 5px;
  width: 300px;
  padding: 10px 10px;
  z-index: 900;
}

.box .icon{
  padding: 0 5px;
}

.box .tip{
  color: #fff;
  flex: 1;
}

.box .undo-btn{
  color: #21969a;
  background-color: #4d4d50;
  padding: 4px 7px;
  border-radius: 2px;
  cursor: pointer;
}

.box .close-btn{
  margin-left: 5px;
  cursor: pointer;
  padding: 0 5px;
}

.slide-right {
  animation: slide-right 0.5s both;
}

@keyframes slide-right {
  0% {
    transform: translateX(-100px);
  }
  100% {
    transform: translateX(0);
  }
}
</style>
